@import "../../global";

.activeTab(@c, @b) {
  color: @c;
  background-color: @b;
}

.this() {
  &::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
  }
}

.login {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url('/images/cloudBG.png') no-repeat center;
  background-size: cover;

  .login-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 4%;
    height: 9.4%;
    background-color: rgba(0, 0, 0, 0.185);
    border-bottom: 1px solid rgba(255, 255, 255, 0.185);
    z-index: 2;

    img {
      height: 53%;
    }
  }

  .login-content {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;

    .content-title {
      position: absolute;
      left: 15%;
      top: 39%;
      color: #FFFFFF;

      h3 {
        margin-bottom: 57px;
        color: #FFFFFF;
        #font(48px);
      }

      p {
        margin-bottom: 26px;
        #font(24px, 300);
      }
    }

    // 登陆盒子开始
    .content-box {
      position: absolute;
      right: 14.6%;
      top: 50%;
      min-height: 58%;
      width: 29%;
      background-color: white;
      transform: translateY(-50%);

      .content-box-tab {
        height: 65px;
        background-color: #A7ACAE;
        cursor: pointer;

        .inside,
        .outside {
          position: relative;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          height: 100%;
          color: white;
          #font(20px);
        }

        .inside {
          .this();
          .activeTab(#4D4D4D, #F5F5F5);
        }
      }

      // 输入框
      .content-box-cont {
        padding: 10.7%;
        text-align: center;

        .logo {
          margin-bottom: 10.8%;
          height: 65px;
          text-align: center;
        }

        .input {
          position: relative;
          padding-left: 50px;
          margin-bottom: 8.3%;
          border-bottom: 1px solid #E0E1E3;

          input {
            font-size: 15px;
          }

          .name {
            font-family: Myriad Pro;
            position: absolute;
            left: 0;
            color: #878888;
            font-size: 17px;
            font-weight: 400;
          }
        }

        .submit {
          font-family: Microsoft YaHei UI;
          margin-top: 21px;
          margin-bottom: 8.4%;
          height: 45px;
          width: 100%;
          font-size: 16px;
          font-weight: bold;
          border-color: #39A3EC;
        }

        .option {
          display: flex;
          justify-content: space-between;

          * {
            font-size: 15px;
          }
        }
      }
    }
  }

  .login-footer {
    position: absolute;
    right: 50%;
    bottom: 3%;
    transform: translateX(50%);
    z-index: 2;
  }

  //背景图片
  .background {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: url('/images/cloudBG2.png') no-repeat center;
    background-size: cover;
    opacity: 0;
    transition: 1s;
  }


  // 切换效果
  &.active {

    .background {
      opacity: 1;
      transition: 1s;
    }

    .content-box .content-box-tab .outside {
      .this();
      .activeTab(#4D4D4D, #F5F5F5)
    }

    // 状态清空
    .content-box .content-box-tab .inside {
      .activeTab(#F5F5F5, #A7ACAE);

      &::before {
        display: none;
      }
    }
  }
}